<template>
  <example>
    <xdh-map :zoom="6" :center="[113, 22.9]">
      <xdh-map-polygon :key="1" :coordinates="coordinates"
                       ref="polygon"
                       :fill="color"
                       stroke-color="yellow"
                       :stroke-width="3" @click="clickHandle" @dblclick="dblClickHandle"></xdh-map-polygon>

      <xdh-map-polygon :key="2" :coordinates="test"
                       fill="#f00"
                       stroke-color="yellow"
                       :stroke-width="3" @dblclick="dblClickHandle"></xdh-map-polygon>
    </xdh-map>
  </example>
</template>

<script>
  // import {getTransform} from 'ol/proj'
  export default {
    data() {
      return {
        color: '#f00',
        coordinates: [
          [120, 30],
          [120, 29],
          [119, 29.5],
          [118, 30.5],
          [120, 30]
        ],

        test: [
          [
            113.170166015625,
            22.978623970384913
          ],
          [
            113.22509765625,
            22.986209684312335
          ],
          [
            113.27178955078125,
            22.965980167474108
          ],
          [
            113.32122802734375,
            22.971037830568942
          ],
          [
            113.34869384765625,
            22.98115258902039
          ],
          [
            113.40362548828125,
            22.996323306867165
          ],
          [
            113.44757080078124,
            23.016548278956254
          ],
          [
            113.46954345703125,
            23.031715018113417
          ],
          [
            113.4613037109375,
            23.059516273509303
          ],
          [
            113.48602294921875,
            23.08731178745734
          ],
          [
            113.499755859375,
            23.115101554603044
          ],
          [
            113.48876953125,
            23.15551276434146
          ],
          [
            113.4832763671875,
            23.1959117878095
          ],
          [
            113.4613037109375,
            23.22620304830155
          ],
          [
            113.43109130859375,
            23.24891698501049
          ],
          [
            113.38714599609375,
            23.269103904021517
          ],
          [
            113.35693359375,
            23.28171917560002
          ],
          [
            113.3184814453125,
            23.294333252116257
          ],
          [
            113.2965087890625,
            23.301901124188877
          ],
          [
            113.26629638671875,
            23.3094685657522
          ],
          [
            113.236083984375,
            23.32208001137843
          ],
          [
            113.192138671875,
            23.30442365254967
          ],
          [
            113.148193359375,
            23.301901124188877
          ],
          [
            113.1097412109375,
            23.3094685657522
          ],
          [
            113.060302734375,
            23.311990950585997
          ],
          [
            113.01361083984375,
            23.3094685657522
          ],
          [
            112.98614501953125,
            23.261534167651835
          ],
          [
            112.95867919921875,
            23.21863087705702
          ],
          [
            112.939453125,
            23.19086257687362
          ],
          [
            112.92572021484374,
            23.168138769018746
          ],
          [
            112.91473388671875,
            23.127731365725925
          ],
          [
            112.89825439453125,
            23.10247055501927
          ],
          [
            112.89276123046875,
            23.05193468212115
          ],
          [
            112.9010009765625,
            22.996323306867165
          ],
          [
            112.906494140625,
            22.978623970384913
          ],
          [
            112.93670654296875,
            22.983681160330878
          ],
          [
            112.97241210937499,
            23.00137983406543
          ],
          [
            113.01361083984375,
            22.98873816096074
          ],
          [
            113.02734374999999,
            22.953335182044686
          ],
          [
            113.03558349609374,
            22.930571229938142
          ],
          [
            113.10150146484375,
            22.92804166565176
          ],
          [
            113.15093994140625,
            22.902743425252357
          ],
          [
            113.17840576171875,
            22.902743425252357
          ],
          [
            113.170166015625,
            22.978623970384913
          ]
        ]
      }
    },
    methods: {
      clickHandle(e) {
        
        this.color = '#f0f0f0'
        console.log(e)
      },
      dblClickHandle(e) {
        console.log('ccc')
      }
    },
    mounted() {
      setTimeout(() => {
        this.color = '#f0f0f0'
      }, 1000)
    }
  }
</script>

<style scoped>

</style>
